<template>
	<view :data-theme="theme">
		<view class="my-account">
			<view class="wrapper">
				<view class="header">
					<view class="headerCon">
						<view class="account acea-row row-top row-between">
							<view class="assets">
								<view>账户余额(元)</view>
								<view class="money">{{ statistics.nowMoney || 0 }}</view>
							</view>
							<view v-show="statistics.rechargeSwitch" @click="openSubscribe('/pages/users/user_payment/index')" class="recharge font_color">充值</view>
						</view>
						<view class="cumulative acea-row row-top">
							<view class="item" v-if="statistics.rechargeSwitch">
								<view>余额充值(元)</view>
								<view class="money">{{ statistics.recharge || 0 }}</view>
							</view>
							<view class="item">
								<view>余额消费(元)</view>
								<view class="money">{{ statistics.monetary || 0 }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="nav acea-row row-middle">
					<navigator class="item" hover-class="none" url="/pages/users/user_bill/index?type=all">
						<view class="pictrue">
							<text class="iconfont icon-s-zhangdanjilu icon_txt"></text>
						</view>
						<view>余额记录</view>
					</navigator>
					<navigator class="item" hover-class="none" url="/pages/users/user_bill/index?type=expenditure">
						<view class="pictrue">
							<text class="iconfont icon-s-xiaofeijilu icon_txt"></text>
						</view>
						<view>消费记录</view>
					</navigator>
					<navigator class="item" hover-class="none" url="/pages/users/user_bill/index?type=income" v-if="userInfo.rechargeSwitch">
						<view class="pictrue">
							<text class="iconfont icon-s-chongzhijilu icon_txt"></text>
						</view>
						<view>充值记录</view>
					</navigator>
					<navigator class="item" hover-class="none" url="/pages/merchant/user_integral/index">
						<view class="pictrue">
							<text class="iconfont icon-jifenzhongxin icon_txt"></text>
						</view>
						<view>积分中心</view>
					</navigator>
				</view>
			</view>
			<recommend ref="recommendIndex" @getRecommendLength="getRecommendLength"></recommend>
			<view class="noCommodity" v-if="isNoCommodity">
				<view class="pictrue">
					<image :src="urlDomain + 'crmebimage/presets/noShopper.png'"></image>
				</view>
				<text class="text-ccc">暂无商品</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getProductHot } from '@/api/product.js';
import { userActivity, getMyAccountApi } from '@/api/user.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import { alipayQueryPayResult } from '@/api/order.js';
import recommend from '@/components/base/recommend.vue';
let app = getApp();
export default {
	components: {
		recommend
	},
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			isClose: false,
			activity: {},
			hotScroll: false,
			statistics: {},
			hotPage: 1,
			hotLimit: 10,
			theme: app.globalData.theme,
			isNoCommodity: false
		};
	},
	computed: mapGetters(['isLogin', 'userInfo']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.userDalance();
				}
			},
			deep: true
		}
	},
	onLoad() {
		if (this.isLogin) {
			// #ifdef H5
			var url = window.location.search;
			if (url) {
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
					}
				}
				this.orderId = theRequest.out_trade_no; //返回的订单号
				this.alipayQueryPay();
			}
			// #endif
			this.userDalance();
		} else {
			toLogin();
		}
	},
	onReachBottom() {
		this.$refs.recommendIndex.get_host_product();
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit('scroll');
	},
	methods: {
		getRecommendLength(e) {
			this.isNoCommodity = e == 0 ? true : false;
		},
		/**
		 * 支付宝充值结果查询
		 */
		alipayQueryPay() {
			uni.showLoading({
				title: '查询中...'
			});
			alipayQueryPayResult(this.orderId)
				.then((res) => {
					this.userDalance();
					return this.$util.Tips({
						title: '充值成功'
					});
					uni.hideLoading();
				})
				.catch((err) => {
					uni.hideLoading();
					return this.$util.Tips({
						title: err
					});
				});
		},
		userDalance() {
			getMyAccountApi().then((res) => {
				this.statistics = res.data;
			});
		},
		openSubscribe: function (page) {
			uni.navigateTo({
				url: page
			});
		}
	}
};
</script>

<style scoped lang="scss">
.my-account .wrapper {
	background-color: #fff;
	padding: 32rpx 0 15rpx 0;
}

.my-account .wrapper .header {
	width: 690rpx;
	height: 330rpx;
	@include main_bg_color(theme);
	border-radius: 16rpx;
	margin: 0 auto;
	box-sizing: border-box;
	color: rgba(255, 255, 255, 0.6);
	font-size: 24rpx;
}

.my-account .wrapper .header .headerCon {
	background-image: url('');
	background-repeat: no-repeat;
	background-size: 100%;
	height: 100%;
	width: 100%;
	padding: 36rpx 0 29rpx 0;
	box-sizing: border-box;
}

.my-account .wrapper .header .headerCon .account {
	padding: 0 35rpx;
}

.my-account .wrapper .header .headerCon .account .assets .money {
	font-size: 72rpx;
	color: #fff;
	font-family: 'Guildford Pro';
}

.my-account .wrapper .header .headerCon .account .recharge {
	font-size: 28rpx;
	width: 150rpx;
	height: 54rpx;
	border-radius: 27rpx;
	background-color: #fff9f8;
	text-align: center;
	line-height: 54rpx;
}

.font_color {
	@include main_color(theme);
}

.icon_txt {
	font-size: 43rpx;
	@include main_color(theme);
}

.my-account .wrapper .header .headerCon .cumulative {
	margin-top: 46rpx;
}

.my-account .wrapper .header .headerCon .cumulative .item {
	flex: 1;
	padding-left: 35rpx;
}

.my-account .wrapper .header .headerCon .cumulative .item .money {
	font-size: 48rpx;
	font-family: 'Guildford Pro';
	color: #fff;
	margin-top: 6rpx;
}

.my-account .wrapper .nav {
	height: 155rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.my-account .wrapper .nav .item {
	flex: 1;
	text-align: center;
	font-size: 26rpx;
	color: #999;
}

.my-account .wrapper .nav .item .pictrue {
	width: 44rpx;
	height: 44rpx;
	margin: 0 auto;
	margin-bottom: 20rpx;
}

.my-account .wrapper .nav .item .pictrue image {
	width: 100%;
	height: 100%;
}

.my-account .wrapper .advert {
	padding: 0 30rpx;
	margin-top: 30rpx;
}

.my-account .wrapper .advert .item {
	background-color: #fff6d1;
	width: 332rpx;
	height: 118rpx;
	border-radius: 10rpx;
	padding: 0 27rpx 0 25rpx;
	box-sizing: border-box;
	font-size: 24rpx;
	color: #e44609;
}

.my-account .wrapper .advert .item.on {
	background-color: #fff3f3;
	color: #e96868;
}

.my-account .wrapper .advert .item .pictrue {
	width: 78rpx;
	height: 78rpx;
}

.my-account .wrapper .advert .item .pictrue image {
	width: 100%;
	height: 100%;
}

.my-account .wrapper .advert .item .text .name {
	font-size: 30rpx;
	font-weight: bold;
	color: #f33c2b;
	margin-bottom: 7rpx;
}

.my-account .wrapper .advert .item.on .text .name {
	color: #f64051;
}

.my-account .wrapper .list {
	padding: 0 30rpx;
}

.my-account .wrapper .list .item {
	margin-top: 44rpx;
}

.my-account .wrapper .list .item .picTxt .iconfont {
	width: 82rpx;
	height: 82rpx;
	border-radius: 50%;
	background-image: linear-gradient(to right, #ff9389 0%, #f9776b 100%);
	text-align: center;
	line-height: 82rpx;
	color: #fff;
	font-size: 40rpx;
}

.my-account .wrapper .list .item .picTxt .iconfont.yellow {
	background-image: linear-gradient(to right, #ffccaa 0%, #fea060 100%);
}

.my-account .wrapper .list .item .picTxt .iconfont.green {
	background-image: linear-gradient(to right, #a1d67c 0%, #9dd074 100%);
}

.my-account .wrapper .list .item .picTxt {
	width: 428rpx;
	font-size: 30rpx;
	color: #282828;
}

.my-account .wrapper .list .item .picTxt .text {
	width: 317rpx;
}

.my-account .wrapper .list .item .picTxt .text .infor {
	font-size: 24rpx;
	color: #999;
	margin-top: 5rpx;
}

.my-account .wrapper .list .item .bnt {
	font-size: 26rpx;
	color: #282828;
	width: 156rpx;
	height: 52rpx;
	border: 1rpx solid #ddd;
	border-radius: 26rpx;
	text-align: center;
	line-height: 52rpx;
}

.my-account .wrapper .list .item .bnt.end {
	font-size: 26rpx;
	color: #aaa;
	background-color: #f2f2f2;
	border-color: #f2f2f2;
}
</style>
